<template>
    <view class="container">
        <header-bar :config="config" @rightClick="addOrderClick"></header-bar>
        <!-- <search-bar ref="orderSearch" :placeholderText="placeholderText" @searchFn="searchFn" :actions="actions"
            @actionFn="filterOpen">
        </search-bar> -->
        <view class="main">
            <member-list ref="memberList" :height="listHeight"></member-list>
        </view>
    </view>
</template>

<script>
import { mapGetters } from "vuex"
import { getElementHeight } from "@/uni-sub-base/utils/elementUtil.js"
import searchBar from "@/components/common/search-bar.vue"
import memberList from "./member-list.vue"
export default {
    components: {
        searchBar,
        memberList,
    },
    props: {
        visible: {
            type: Boolean,
            default: false,
        },
    },
    watch: {
        visible: {
            handler(newVal) {
                if (this.visible) {
                    if (this.$refs.orderList) {
                        this.$refs.orderList.refresh()
                    }
                    if (this.$refs.returnList) {
                        this.$refs.returnList.refresh()
                    }
                }
                this.$nextTick(() => { })
            },
            immediate: true,
        },
        //监听更新
        getUpOrderView(e) {
            if (this.tabIndex == 0 && this.$refs.orderList) {
                this.$refs.orderList.refresh()
            }
            if (this.tabIndex == 1 && this.$refs.returnList) {
                this.$refs.returnList.refresh()
            }
        },
    },
    data() {
        return {
            placeholderText: "输入会员名称或会员号",
            config: {
                title: "客户列表",
                back: true,
                centerSlot: true,
                rightSlot: true,
                color: ["#ffffff"],
                statusBarFontColor: "#ffffff",
                rightBtns: [],
            },
            actions: [
                // {
                //     type: "icon-shaixuan",
                //     id: 1,
                // },
            ],
            listHeight: "",
            loadOk: false,
            filterData: {
                searchKey: "",
            },
            refresh: false,
        }
    },
    computed: {
        ...mapGetters(["getUpOrderView"]),
    },
    created() {
        this.config.backgroundColor = [1, this.getThemeColor]
    },
    mounted() {
        this.getListHeight()
        // this.getOrderStateSelects()
        // this.getRefundOrderStateSelects()
    },
    onShow() { },
    methods: {
        getOrderStateSelects() {
            GetOrderStateSelects().then((res) => {
                if (res.State == 1) {
                    this.orderState = res.Data
                }
            })
        },
        getRefundOrderStateSelects() {
            GetRefundOrderStateSelects().then((res) => {
                if (res.State == 1) {
                    this.returnState = res.Data
                }
            })
        },
        getListHeight() {
            //获取商品高度 44 60
            getElementHeight(this, ".main", (e) => {
                console.log("获取商品高度")
                console.log(e)
                //#ifdef H5
                this.listHeight = e + "px"
                //#endif
                //#ifdef APP
                this.listHeight = e - 134 + "px"
                //#endif
                this.loadOk = true
            })
        },
        swiperChange(e) {
            let tabIndex = e.detail.current
            this.clickTab(tabIndex)
        },
        //tab切换
        clickTab(index) {
            if (this.tabIndex != index) {
                clearTimeout(this.timer)
                this.timer = setTimeout((time) => {
                    this.tabIndex = index
                }, 20)
            }
        },
        searchFn(key) {
            this.filterData.searchKey = key
            this.$refs.memberList.refresh(this.filterData)
        },
        openStarDate() {
            //打开选择开始日期
            this.$refs.startDate.open()
        },
        confirmStarDate(e) {
            //选择开始日期
            this.filterData.startTime = e.fulldate;
            this.filterData.endTime = ""
        },
        openEndDate() {
            //打开选择结束日期
            this.$refs.endDate.open()
        },
        confirmEndDate(e) {
            //选择结束日期
            this.filterData.endTime = e.fulldate
        },
        openStarDateReturn() {
            //打开选择开始日期
            this.$refs.startDateReturn.open()
        },
        confirmStarDateReturn(e) {
            //选择开始日期
            this.filterReturnData.startTime = e.fulldate
            this.filterReturnData.endTime = ""
        },
        openEndDateReturn() {
            //打开选择结束日期
            this.$refs.endDateReturn.open()
        },
        confirmEndDateReturn(e) {
            //选择结束日期
            this.filterReturnData.endTime = e.fulldate
        },
        filterOpen() {
            this.$refs.showRight.open()
        },
        filterClose() {
            this.$refs.showRight.close()
        },
        //重置
        cancelFilterState() {
            this.orderState.forEach((e) => {
                e.checked = false
            })
            this.$forceUpdate()
        },
        //重置
        cancelFilterReturnState() {
            this.returnState.forEach((e) => {
                e.checked = false
            })
            this.$forceUpdate()
        },
        //
        changeState(index) {
            this.orderState[index].checked = !this.orderState[index].checked
            this.$forceUpdate()
        },
        changeReturnState(index) {
            this.returnState[index].checked = !this.returnState[index].checked
            this.$forceUpdate()
        },
        filterStateFn() {
            let ids = []
            this.orderState.forEach((e) => {
                if (e.checked) {
                    ids.push(e.Key)
                }
            })
            this.filterData.orderState = ids.join(",")
        },
        filterReturnStateFn() {
            let ids = []
            this.returnState.forEach((e) => {
                if (e.checked) {
                    ids.push(e.Key)
                }
            })
            this.filterReturnData.states = ids.join(",")
        },
        setFn() {
            // this.filterData.valetType = this.valetType
            // this.filterData.payState = this.payState
            this.filterStateFn()
            console.log(this.filterData)
            this.$refs.orderList.refresh(this.filterData)

            this.filterClose()
        },
        resetFn() {
            this.filterData.startTime = ""
            this.filterData.endTime = ""
            this.valetType = -1
            this.payState = -1
            this.cancelFilterState()
            this.setFn()
        },
        setReturnFn() {
            this.filterReturnData.optType = this.optType
            this.filterReturnStateFn()
            console.log(this.filterReturnData)
            this.$refs.returnList.refresh(this.filterReturnData)

            this.filterClose()
        },
        resetReturnFn() {
            this.filterReturnData.startTime = ""
            this.filterReturnData.endTime = ""
            this.optType = -1
            this.cancelFilterReturnState()
            this.setReturnFn()
        },
        changeOptType(type) {
            if (this.optType == type) {
                this.optType = -1
            } else {
                this.optType = type
            }
            console.log(this.optType)
        },
        changeValetTye(type) {
            if (this.valetType == type) {
                this.valetType = -1
            } else {
                this.valetType = type
            }
            console.log(this.valetType)
        },
        changePayState(type) {
            if (this.payState == type) {
                this.payState = -1
            } else {
                this.payState = type
            }
            console.log(this.payState)
        },
        addOrderClick(e) {
            if (e.id == 1) {
                this.easyGoTo("/pages/private/edit")
            }
        },
    },
}
</script>

<style lang="scss">
.date-select {
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 100rpx;

    .date-input {
        flex: 1;
        display: flex;
        justify-content: center;
        border-bottom: solid 1rpx $border;
        padding-bottom: 16rpx;
    }

    .to {
        margin: 0 20rpx;
    }
}

.drawer {
    z-index: 100 !important;
}

.search-box {
    height: 96rpx;
}
</style>
